<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // (1)限制表单输入4-11位数字, 
        // (条件: 只能出现数字)
        let inp1 = document.querySelector(".inp1");
        let inp1Btn = document.querySelector(".inp1_btn");

        let reg1 = /^\d{4,11}$/;

        inp1Btn.addEventListener("click", () => {
            if (reg1.test(inp1.value)) {
                console.log("输入正确");
            } else {
                console.log("输入4-11位数字");
            }
        })


        // (2)限制表单输入4-11位字符串 
        // (条件: 数字、大写字母[至少出现两个])
        let inp2 = document.querySelector(".inp2");
        let inp2Btn = document.querySelector(".inp2_btn");
        //长度正则
        let reg2_1 = /^[A-Z0-9]{4,11}$/;
        //范围正则
        let reg2_2 = /([A-Z]{2,}[0-9]+)|([0-9]+[A-Z]{2,}[0-9]+)|([A-Z]+[0-9]+[A-Z]+)|([0-9]+[A-Z]{2,})/;

        inp2Btn.addEventListener("click", () => {
            //必须符合长度和内容范围
            if (reg2_1.test(inp2.value) && reg2_2.test(inp2.value)) {
                console.log("输入正确");
            } else {
                console.log("数字、大写字母[至少出现两个]");
            }

        })

        // (3)限制表单输入格式为qq邮箱
        // (条件: 数字[5-10] + @qq.com)
        let inp3 = document.querySelector(".inp3");
        let inp3Btn = document.querySelector(".inp3_btn");

        let reg3 = /^[1-9]{1}\{4,9}@qq.com$/;
        inp3Btn.addEventListener("click", () => {
            if (reg3.test(inp3.value)) {
                console.log("输入正确");
            } else {
                console.log("请输入qq邮箱");
            }
        })
    </script>
</body>

</html>